<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>英雄列表-增删改查</title>
  <link rel="stylesheet" href="../css/bootstrap.css" />
  <style>
    .panel {
      width: 900px;
      margin: 10px auto;
    }

    .table img {
      width: 40px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">英雄列表管理</div>
      <div class="panel-body">
        <!-- 存放的搜索区域 -->
        <form action="" autocomplete="off">
          <div class="row">
            <div class="col-lg-3">
              <input type="text" class="form-control" placeholder="输入英雄名称" name="name" />
            </div>
            <div class="col-lg-3">
              <select class="form-control" name="gender">
                <option value="">--选择性别--</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="col-lg-3">
              <input name="age" type="text" class="form-control" placeholder="输入年龄" />
            </div>
            <div class="col-lg-3">
              <button type="button" class="btn btn-success" id="search">
                搜索
              </button>
              <button type="button" class="btn btn-warning" id="reset">
                重置
              </button>
              <button type="button" class="btn btn-primary" id="add">
                添加
              </button>
            </div>
          </div>
        </form>
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>编号</th>
            <th>英雄名称</th>
            <th>英雄性别</th>
            <th>年龄</th>
            <th>操作区</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <tr>
            <td>1</td>
            <td>大乔</td>
            <td>女</td>
            <td>18</td>
            <td>
              <button type="button" class="btn btn-danger">删除</button>
              <button type="button" class="btn btn-info">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">添加英雄</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" autocomplete="off">
              <div class="form-group">
                <label for="" class="col-sm-2 control-label">英雄名称</label>
                <div class="col-sm-10">
                  <input type="text" name="heroName" class="form-control" placeholder="输入英雄名称" />
                </div>
              </div>
              <div class="form-group">
                <label for="" class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
                  <div class="radio">
                    <label>
                      <input type="radio" name="heroGender" value="男" checked />
                      男
                    </label>
                  </div>
                  <div class="radio">
                    <label>
                      <input type="radio" name="heroGender" value="女" />
                      女
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                  <input type="number" class="form-control" placeholder="输入英雄年龄" name="heroAge" />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="addFormCancel">
              取消
            </button>
            <button id="submit" type="button" class="btn btn-primary">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
  </div>
  <script>
    // 获取对应标签元素
    const tbody = document.querySelector("tbody");
    const searchBtn = document.querySelector("#search");
    const resetBtn = document.querySelector("#reset");
    const nameDom = document.querySelector("[name='name']");
    const genderDom = document.querySelector("[name='gender']");
    const ageDom = document.querySelector("[name='age']");
    const addBtn = document.querySelector('#add');

    // 获取新增相关标签
    const submit = document.querySelector('#submit');
    const heroName = document.querySelector('[name=heroName]');
    const heroGender = document.querySelectorAll('[name=heroGender]');
    const heroAge = document.querySelector('[name=heroAge]');
    // 获取取消标签
    const addFormCancel = document.querySelector('#addFormCancel');
    // 获取编辑标签
    const edit = document.querySelector('.edit');
    // 模态框获取标题元素
    const myModalLabel = document.querySelector('#myModalLabel');

    // 本地存储
    let list = JSON.parse(localStorage.getItem('arr1')) || [];

    // 原始数据
    /* const list = [
      { id: 0, name: "大乔", gender: "男", age: 18 },
      { id: 1, name: "小乔", gender: "女", age: 20 },
      { id: 3, name: "鲁班", gender: "男", age: 48 },
      { id: 4, name: "后羿", gender: "女", age: 28 },
    ]; */

    // 封装页面渲染函数
    function randerHtml(list = newArr) {
      // 声明初始值
      let html = ''
      // 使用foreach遍历数组
      list.forEach((element, index) => {
        // 将遍历出的数据添加到对应的标签中，同时将标签累加到html中
        html += `
          <tr>
            <td>${element.id}</td>
            <td>${element.name}</td>
            <td>${element.gender}</td>
            <td>${element.age}</td>
            <td>
              <button type="button" class="btn btn-danger remove" data-id="${index}">删除</button>
              <button type="button" class="btn btn-info edit" data-id="${index}">编辑</button>
            </td>
          </tr>
        `;
      });
      // 将获html解构标签添加到tbody中
      tbody.innerHTML = html;
    }
    // 初次调用函数渲染页面
    randerHtml(list);


    // 声明编辑数据的下标为全局变量，方便后续修改
    let editIndex;
    // 删除操作 
    tbody.addEventListener('click', function (e) {
      // 获取自定义属性作为下标
      const index = e.target.dataset.id;
      // 判断是否点击到删除标签
      if (e.target.classList.contains('remove')) {
        // 从数组中删除点击到对应的数据
        list.splice(index, 1);
        // 重新渲染页面
        randerHtml(list);
        // 保存到本地存储中
        localStorage.setItem('arr1', JSON.stringify(list))
      }
      // 判断是否点击到的是编辑按钮 编辑操作
      else if (e.target.classList.contains('edit')) {
        // 点击时开启模态框
        $("#myModal").modal("show");
        // 获取自定义属性id
        editIndex = e.target.dataset.id;
        const { id, name, gender, age } = list[editIndex];
        // 同步姓名
        heroName.value = name;
        // 同步性别
        document.querySelector(`[name=heroGender][value='${gender}']`).checked = true;
        // 同步年龄
        heroAge.value = age;
        // 修改标题
        myModalLabel.innerHTML = '编辑英雄';
      }
    })

    // 筛选功能
    // 给搜索按钮绑定点击事件
    searchBtn.addEventListener('click', function (e) {
      // 遍历数组
      const newArr = list.filter((item) => {
        // 将原数组中对应的数据解构到新数组中对应的数据下
        const uname = nameDom.value.trim() === '' || nameDom.value.trim() === item.name;
        const genders = genderDom.value.trim() === '' || genderDom.value.trim() === item.gender;
        const ages = ageDom.value.trim() === '' || +ageDom.value.trim() == item.age; // 注意===是比较类型和值这里只能用==比较值

        // 返回拿到的对应数据保存到数据中
        return uname && genders && ages;
      })
      // 将新数组渲染到页面中
      randerHtml(newArr);
    })

    // 重置按钮操作，清空输入框中的数据，为按钮绑定点击事件
    resetBtn.addEventListener('click', function () {
      // 将输入框中的值全部赋空
      nameDom.value = '';
      genderDom.value = '';
      ageDom.value = '';
      randerHtml(list);
    })
    // 新增数据 给添加按钮绑定点击事件
    addBtn.addEventListener('click', function (e) {
      $("#myModal").modal("show");
      // 更改标题
      myModalLabel.innerHTML = '新增英雄';
      // 清空输入框数据
      getResult();
    })
    // 点击确定添加按钮
    submit.addEventListener('click', function (e) {
      // 将获取到的性别标签伪数组转为真数组，再使用数组find方法查找选中的单选框
      const genderInfo = [...heroGender].find(item => item.checked);
      // 关闭弹窗
      $("#myModal").modal("hide");
      // 判断模态框标题是否是‘新增英雄’标题，是就做新增
      if (myModalLabel.innerText === '新增英雄') {
        // 判断输入的数据是否为空,不为空才创建对象
        if (heroName.value !== '' && heroAge.value !== '') {
          // 如果数据不为空，声明新对象来存储输入的数据
          const obj = {
            id: list.length + 1,
            name: heroName.value.trim(),
            gender: genderInfo.value,
            age: heroAge.value.trim()
          }
          // 将对象添加到数组中
          list.push(obj);
          // 重新渲染页面
          randerHtml(list);
          // 保存到本地存储中
          localStorage.setItem('arr1', JSON.stringify(list))


          // 清空输入框数据
          getResult();
        } else {
          alert('输入的数据不能为空哦！');
        }
        // 判断模态框标题是否是‘编辑英雄’标题，是就做编辑
      } else if (myModalLabel.innerText === '编辑英雄') {
        // 根据编辑的下标修改对应的下标数据
        list[editIndex].name = heroName.value.trim();
        list[editIndex].gender = genderInfo.value;
        list[editIndex].age = heroAge.value.trim();
        // 重新渲染页面
        randerHtml(list);
        // 保存到本地存储中
        localStorage.setItem('arr1', JSON.stringify(list))
      }
    })

    // 点击取消按钮，绑定点击事件，清空数据
    addFormCancel.addEventListener('click', function (e) {
      getResult();
    })

    // 封装清空数据函数，方便需要清空时调用
    function getResult() {
      heroName.value = '';
      heroAge.value = '';
      document.querySelector(`[name=heroGender][value='男']`).checked = true;
    }
  </script>

  <!-- 引入js文件 -->
  <script src="../jquery/jquery.min.js"></script>
  <script src="../js/bootstrap.js"></script>
  </script>
</body>

</html>